<template>
	<view class="bg-white">
		<view class="padding-tb">
			<view class="flex justify-between align-center">
				<view class="text-bold text-lg">全部评论</view>
				<view>
					<xuan-switch :switchList="switchList" bj_color="#f5f5f5" checked_bj_color="#fff"
						checked_color="000" @change="switchChange"></xuan-switch>
				</view>
			</view>

			<view v-for="comment in comments" :key="comment.id">
        <view class="padding-tb">
        <view class="flex">
					<view class="avatar" @click="toUserCenter(comment.author.id)">
						<image :src="comment.author.avatar" class="w-100" mode="widthFix"></image>
					</view>
					<view class="padding-left-sm flex-sub">
						<view class="flex align-center justify-between text-bold text-black">
             <view class="flex-sub" @click="toUserCenter(comment.author.id)"> {{ comment.author.username }}</view>
            </view>
						<view class="w-100">{{ comment.content }}</view>
						<view class="flex justify-between align-end">
							<view class="text-grey text-sm">{{ String(comment.published_at).substring(0,10) }}</view>
							<view class="flex icons align-center">
                <view @click="deleteComment(comment.id)" v-if="comment.author.id == user.id">
									<image src="../../static/icons/delete.svg" mode="widthFix"></image>
								</view>
								<view @click="commentComment(comment)">
									<image src="../../static/icons/comment.svg" mode="widthFix"></image>
								</view>
								<view @click="dianzanComment(comment)">
									<image v-if="comment.zanStatus" src="../../static/icons/dianzan-blue.svg" mode="widthFix"></image>
									<image v-else src="../../static/icons/dianzan.svg" mode="widthFix"></image>
								</view>
								<view class="text-sm text-grey" v-if="comment.zanCount"><text>{{ comment.zanCount }}</text></view>
							</view>
						</view>



						<view class="padding-tb flex" v-for="reply in comment.replies" :key="reply.id">
							<view class="avatar" @click="toUserCenter(reply.author.id)">
								<image :src="reply.author.avatar" class="w-100" mode="widthFix"></image>
							</view>
							<view class=" padding-left-sm flex-sub">
								<view class="flex align-center text-bold text-black">
                  <view @click="toUserCenter(reply.author.id)">{{ reply.author.username }}</view>
                  <template v-if="reply.to">
                  <view  class="margin-lr"><uni-icons type="forward" size="20" color="#8a8a8a"></uni-icons> </view>
                  <view @click="toUserCenter(reply.to.id)">{{ reply.to.username }}</view>
                  </template>
                </view>
								<view class="">{{ reply.content }}</view>
								<view class="flex justify-between align-end">
									<view class="text-grey text-sm">{{ String(reply.published_at).substring(0,10) }}</view>
									<view class="flex icons align-center">
                    <view @click="deleteReply(reply.id)" v-if="comment.author.id == user.id">
                      <image src="../../static/icons/delete.svg" mode="widthFix"></image>
                    </view>
										<view @click="commentReply(comment,reply)">
											<image src="../../static/icons/comment.svg" mode="widthFix"></image>
										</view>
										<view @click="dianzanReply(reply)">
											<image v-if="reply.zanStatus" src="../../static/icons/dianzan-blue.svg" mode="widthFix"></image>
											<image v-else src="../../static/icons/dianzan.svg" mode="widthFix"></image>
										</view>
										<view class="text-sm text-grey" v-if="reply.zanCount"><text>{{ reply.zanCount }}</text></view>
									</view>
								</view>
							</view>
						</view>

					</view>
				</view>
        </view>
			</view>
		</view>
			<uni-popup ref="popup" type="bottom" background-color="#fff">
				<view class="padding bg-white input-card">
					<uni-easyinput type="textarea" v-model="inputValue" :maxlength="600" :placeholder="placeholder"></uni-easyinput>
					<view class="flex w-100 justify-end align-center padding-top">
						<view class="margin-right-sm">{{600 - inputValue.length}}</view>
						<view><button size="mini" type="primary" @click="submitComment"
								:disabled="inputValue.length==0">发布</button></view>
					</view>
				</view>
			</uni-popup>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
	export default {
    props: {
      article:{
        type: String,
        required: true,
      }
    },
		data() {
			return {
				switchList: ["最新", "热门"],
				inputValue:"",
				placeholder:"快来发表评论吧~",
        comment:{
          type:'article',
        },
        comments:[],
			};
		},
		mounted(){
      this.getArticleComments();
    },
    computed: {
      ...mapGetters({
        user: 'user/getUserinfo'
      }),
    },
		methods: {
			open() {
				this.$refs.popup.open()
			},
      close() {
        this.$refs.popup.close()
        this.inputValue = ""
      },
      toUserCenter(id) {
        uni.navigateTo({
          url: "../person/center?id=" + id,
        })
      },
      getArticleComments(){
        this.$api.getArticleComments(this.article).then(res=>{
          this.comments = res.sort((a,b)=> a.updated_at > b.updated_at ? -1 : 1)
        })
      },
      commentReply(comment,reply){
        this.placeholder = `回复${reply.author.username}`
        this.comment.type="reply"
        this.comment.data= comment
        this.comment.reply= reply
        this.open()
      },
      commentComment(comment){
				this.placeholder = `回复${comment.author.username}`
        this.comment.type="comment"
        this.comment.data= comment
        this.open()
			},
			commentArticle(){
				this.placeholder = "快来发表评论吧~"
        this.comment.type="article"
        this.open()
			},
      dianzanComment(comment){
        if(comment.zanStatus){
          this.$api.unDianzanComment(comment.id).then(res=>{
            console.log(res)
            comment.zanStatus = ! comment.zanStatus
            comment.zanCount--
          })
        }else{
          this.$api.dianzanComment(comment.id).then(res=>{
            console.log(res)
            comment.zanStatus = ! comment.zanStatus
            comment.zanCount++
          })
        }
      },
      dianzanReply(reply){
        if(reply.zanStatus){
          this.$api.unDianzanReply(reply.id).then(res=>{
            console.log(res)
            reply.zanStatus = ! reply.zanStatus
            reply.zanCount--
          })
        }else{
          this.$api.dianzanReply(reply.id).then(res=>{
            console.log(res)
            reply.zanStatus = ! reply.zanStatus
            reply.zanCount++
          })
        }
      },
      submitComment(){
        if(this.comment.type === "article"){
          this.$api.comment(this.article, this.inputValue).then(res=>{
            console.log(res)
            this.getArticleComments();
            this.close();
          })
        } else if(this.comment.type === "comment"){
          this.$api.replyComment({
            comment:this.comment.data.id,
            content:this.inputValue
          }).then(res=>{
            console.log(res)
            this.getArticleComments();
            this.close();
          })
        } else if (this.comment.type === "reply"){
          this.$api.replyComment(
              {
                comment:this.comment.data.id,
                content:this.inputValue,
                to:this.comment.reply.author.id
              }).then(res=>{
            console.log(res)
            this.getArticleComments();
            this.close();
          })
        }
      },
      deleteComment(id){
        this.$api.deleteComment(id).then(res=>{
          console.log(res)
          this.getArticleComments();
        })
      },
      deleteReply(id){
        this.$api.deleteReply(id).then(res=>{
          console.log(res)
          this.getArticleComments();
        })
      },
      switchChange(isLeft){
        if(isLeft){
          this.comments = this.comments.sort((a,b)=> a.updated_at > b.updated_at ? -1 : 1)
        }else{
          this.comments = this.comments.sort((a,b)=> -(a.zanCount - b.zanCount))
        }
      },
		}
	}
</script>

<style lang="scss">
	.avatar {
		width: 60upx;
		flex-shrink: 0;

		image {
			border-radius: 500upx;
		}
	}

	.icons {
		padding-top: 20upx;

		image {
			width: 40upx;
			margin-left: 20upx;
		}
    text{
      margin-left: 5upx;
    }
	}
	.input-card{

	}

</style>
